<template>
  <div class="mydiscuss">
    <el-divider class="mydis">我的评论</el-divider>
    <el-row class="discuss-record" v-for="(content,index) in contents" :key="index">
      <el-col :span="4">
        <div>
          <el-avatar :size="80" :src="getPic(content.headPic)"></el-avatar>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="discuss-date">{{change(content.commentTime)}}</div>
        <el-row>
          <el-col :span="23"><div class="discuss-content">{{content.commentContent}}</div></el-col>
          <el-col class="discuss-del" :span="1"><a href="#" @click="delComment(index,content.commentId)"><i class="el-icon-delete"></i></a></el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
      contents: []
    };
  },
  computed: {
    user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    },
  },
  methods: {
    change(date){
        return this.$moment(new Date(date)).format('YYYY-MM-DD HH:mm:ss')
      },
     getPic(pic) {
        if(pic==null){
        return require('../assets/bg.jpg')
      }else{
         let path = "http://localhost:3000/upload/" + pic;
      console.log(path);
      return path;
      }
     
    },
    delComment(index,id){
      console.log(index)
      this.$axios.delete("http://localhost:3000/community/delComment/"+this.user[0].userId,{params:{commentId:id}})
      .then(res=>{
        console.log('delComment='+res.data.data)
        this.contents.splice(index,1)
        this.$message({
            showClose: true,
            message: "删除成功！",
            type: "success",
            center: true
          });
      })
      .catch(err=>{
        console.log(err)
      })
    }
  },
  created() {
     
    this.$axios
      .get("http://localhost:3000/community/getCommentList",{params:{userId:this.user[0].userId}})
      .then(res => {
        console.log('个人评论',res.data.data);
        this.contents = res.data.data.reverse();
        this.$store.state.commentCount=this.contents.length
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.mydiscuss {
  width: 90%;
  margin: 0 auto;
  min-height: 480px;
}
.mydis{
  margin: 20px 0;
}
.discuss-record{
  color: #666;
  font-size: 18px;
  text-align: left;
  margin: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
i.el-icon-delete::before{
  position: relative;
  top: -12px;
  right: 4px;
  font-size: 20px;
}
.discuss-date{
  width: 200px;
  height: 20px;
  font-size: 14px;
}
</style>